<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <style>

    </style>
</head>
<body style="background:#EFF0F4;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">{{thtitle}}</div>
      </div>
      <div style="margin:1rem">
        周分析：{{thtitle}}(三周环比)
      </div>
      <div class="" id="main" style="width:100%;height:400px;margin-top:40px"></div>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script>
apiready = function () {
    $api.fixStatusBar($api.byId('header'));
    var ttitle = api.pageParam.title;
    var tlabel = api.pageParam.label;
    var ttype = api.pageParam.type;
    var ttimes = api.pageParam.times_no;
    var tdata = api.pageParam.data;

    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          thtitle:'',
          thlabel:'',
          thtype:'',
          thtimes:'',
          thdata:'',
        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        that.thtitle = ttitle;
        that.thlabel = tlabel;
        that.thtype = ttype;
        that.thtimes = ttimes;
        that.thdata = tdata;
        that.getdata()

      },
      methods: {
        getdata:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/mgt/weekChart',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.thdata,
                label:that.thlabel,
                type:that.thtype,
                times_no:that.thtimes
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    legend: {
                        data:['前两周','前一周','本周累计']
                    },
                    xAxis: {
                        data: ["本店周均环比","小组周均环比","系统周均环比"]
                    },
                    yAxis: {},
                    series: [{
                        name: '前两周',
                        type: 'bar',
                        data: ret.data.week2
                    },{
                        name: '前一周',
                        type: 'bar',
                        data: ret.data.week1
                    },{
                        name: '本周累计',
                        type: 'bar',
                        data: ret.data.week
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
      }
    })
	}


	</script>
</body>
</html>
